<template>
	<view>
		<view class="user-block">
			<view class="title">圈主</view>
			<q-user-list :list="[topicInfo.userInfo]" loadStatus="none"></q-user-list>
		</view>
		<view class="user-block" v-show="topicInfo.userInfo.type== 1">
			<view class="title">管理员</view>
			<q-user-list :list="topicInfo.admin_list" loadStatus="none"></q-user-list>
		</view>
		<view class="user-block">
			<view class="title">圈友</view>
			<q-user-list :list="userList" :loadStatus="loadStatus"></q-user-list>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			topicInfo: {
				admin_list:[]
			},
			userList:[],
			loadStatus: 'loadmore',
			page:1
		};
	},
	onLoad(options) {
		this.topicId = options.id;
		this.getUserList();
		this.getTopicInfo();
	},
	onReachBottom() {
		this.page++;
		this.getUserList();
	},
	methods: {
		getTopicInfo() {
			this.$H
				.get('contents/contents/topic/detail', {
					id: this.topicId
				})
				.then(res => {
					this.topicInfo = res.data.topicEntity;
					this.topicInfo.userInfo = res.data.userEntity;
				});
		},
		getUserList() {
			this.loadStatus = 'loading';
			this.$H
				.get('contents/contents/topic/userList', {//查询圈友列表
					current: this.page,
					id: this.topicId
				})
				.then(res => {
					this.userList = this.userList.concat(res.data.records);
					if (res.data.current === res.data.pages || res.data.pages === 0) {
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'loadmore';
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.user-block {
	margin-bottom: 20rpx;
	background-color: #fff;
	padding: 20rpx;
	&:last-child {
		margin-bottom: 0;
	}
	.title {
		font-weight: 600;
	}
}
</style>
